<template>
	<div class="head">
		<van-sticky>
			<div class="searchBox">
				<van-search v-model="searchObj.storesId" :placeholder="placeholder" @search="handleSearch">
					<template #right-icon>
						<div class="search-confirm" @click.stop="handleSearch">
							<span style="margin-right: 10px;height: 24px;">|</span>
							<span class="search-text">搜索</span>
						</div>
					</template>
				</van-search>
				<div class="condition">
					<van-field v-model="searchObj.startTime" readonly name="datePicker" placeholder="请选择开始时间"
						@click="timekai('startTime')" style="width:40%;cursor: pointer;" input-align="center" />
					<van-field v-model="searchObj.endTime" readonly name="datePicker" placeholder="请选择结束时间"
						@click="timekai('endTime')" style="width:40%;cursor: pointer;" input-align="center" />
				</div>
			</div>
		</van-sticky>
	</div>
	<div style="padding: 0 10px;">
		<div class="card">
			<h3 class="TotalRevenue">总收益</h3>
			<div class="total-revenue" id="totalRevenue">¥ {{ totalAmount }}</div>
		</div>
		<div class="card" style="padding-bottom: 5px;">
			<h3 class="TotalRevenue">店铺收益</h3>
			<div>
				<div class="shop-item" v-for="(item,index) in stores" :key="index" @click="godetails(item)">
					<div class="flex">
						<span style="margin-right:6px;">{{ item.storeName }}</span>
						<van-tag type="primary">{{ item.deviceCount }}台设备</van-tag>
					</div>
					<span style="color: #2d8cf0;font-weight: 700;">¥ {{ item.income }}</span>
				</div>
			</div>
		</div>
	</div>
	<!-- 时间选择 -->
	<van-popup v-model:show="showPicker" destroy-on-close position="bottom" safe-area-inset-bottom round>
		<van-date-picker v-model="currentDate" @confirm="onConfirm" @cancel="showPicker = false" />
	</van-popup>
</template>

<script setup>
	import {
		getUserid
	} from '@/utils/auth';
	import {
		incomeInfo
	} from '@/api/index';
	import {
		ref,
		onMounted
	} from "vue";
	import {
		useRouter
	} from 'vue-router';
	const currentDate = ref([
		new Date().getFullYear().toString(),
		(new Date().getMonth() + 1).toString().padStart(2, '0'),
		new Date().getDate().toString().padStart(2, '0')
	]);
	const showPicker = ref(false);
	const mark = ref('');

	const placeholder = ref('请输入店铺的ID');

	const getTodayString = () => {
	  const now = new Date();
	  const year = now.getFullYear();
	  const month = (now.getMonth() + 1).toString().padStart(2, '0');
	  const day = now.getDate().toString().padStart(2, '0');
	  return `${year}-${month}-${day}`;
	};

	const searchObj = ref({
		userId: getUserid(),
		startTime: getTodayString(),
		endTime: getTodayString(),
		storesId: ''
	});

	const stores = ref([]);
	const totalAmount = ref('');

	onMounted(() => {
		getdata();
	});

	const getdata = async () => {
		try {
			const response = await incomeInfo(searchObj.value);
			const records = response.data || [];
			stores.value = records.stores;
			// stores.push(...records.stores);
			totalAmount.value = records.totalAmount;
		} catch (err) {
			//console.error('获取数据失败', err);
		}
	};

	const timekai = (type) => {
		mark.value = type;
		showPicker.value = true;
	};

	const onConfirm = ({
		selectedValues,
		selectedOptions
	}) => {
		currentDate.value = selectedValues;
		showPicker.value = false;
		// 身份证有效期
		if (mark.value === 'startTime') {
			searchObj.value.startTime = selectedValues.join('-');
		} else {
			searchObj.value.endTime = selectedValues.join('-');
		}
		// list.splice(0, list.length);
		stores.value = [];
		getdata();
	}
	// 输入框搜索
	const handleSearch = (item) => {
		// list.splice(0, list.length);
		stores.value = [];
		getdata();
	};

	// 跳转详情
	const router = useRouter();

	// 跳转详情
	const godetails = (item) => {
		var data = {
			storesId: item.storeId,
			startTime: searchObj.value.startTime,
			endTime: searchObj.value.endTime,
			item: item
		}
		router.push({
			name: 'incomeInfoDetails',
			params: {
				values: JSON.stringify(data)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.condition {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: space-around;
		gap: 10px;
		padding: 0 10px;
		box-sizing: border-box;

		.conditionLi {
			padding: 6px;
			border-radius: 8px;
			border: 1px solid #ddd;
			font-size: 12px;
			background-color: #FFF;
		}
	}


	:deep(.searchBox) {
		.van-search {
			background-color: white;

			// 搜索框
			.van-search__content {
				background-color: white;
				border: 1px solid #cccccc;
				// border-radius: 5px;
				background-color: #f5f5f5;
			}
		}

		.van-search__action {
			color: #fff;
			background-color: #2FBC3C;
			border-radius: 16px;
			width: 40px;
			text-align: center;
			margin: 0 10px;
		}

		// 文字
		.search-confirm {
			display: flex;
			align-items: center;
			height: 100%;
			padding: 0 12px;

			.search-text {
				color: rgb(81, 164, 208);
				/* 蓝色搜索文字 */
				font-size: 14px;
				font-weight: 500;
				white-space: nowrap;
				cursor: pointer;
			}
		}
	}

	.card {
		background: white;
		border-radius: 12px;
		padding: 15px;
		margin-top: 15px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.total-revenue {
		font-size: 24px;
		color: #2d8cf0;
		font-weight: bold;
	}

	.shop-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		flex-wrap: wrap;
		padding-top: 10px;
		border-bottom: 1px solid #eee;
		margin-bottom: 10px;
		cursor: pointer;

		&:last-child {
			border-bottom: none;
		}
	}

	.revenue {
		margin-bottom: 10px;
	}

	.TotalRevenue {
		margin: 12px 0;
	}

	.head {
		background-color: #FFF;
	}

	.flex {
		display: flex;
		align-items: center;
		align-content: center;

	}
	
	:deep(.van-field__control:read-only){
    	cursor: pointer;
	}
</style>